import React, { Component } from 'react'

export default class Like extends Component {
    constructor() {
        super()
        this.state = {
            isLiked: false
        }
    }
    handleLikedClick = () => {
        // 修改state里的数据就要使用setState方法，setState方法可以有两个参数，这是一个异步方法
        // 第一个参数有两种情况，第一种情况是一个对象
        // this.setState({
        //     isLiked: !this.state.isLiked
        // })
        // 第二种情况是一个方法
        this.setState((preState) => {
            console.log('内部的this.state.isLiked' + this.state.isLiked)
            return {
                // isLiked: !this.state.isLiked
                isLiked: !preState.isLiked
            }
        }, () => {
             // 这是第二个参数
            // 要想获取最新的state，就要在这个回调里获取
            console.log(this.state)
        })
        console.log('外部的this.state.isLiked' + this.state.isLiked)
    }
    render() {
        return (
            <div>
                <span onClick={this.handleLikedClick}>
                    {this.state.isLiked ? '取消 ❤️' : '喜欢 🖤'}
                </span>
            </div>
        )
    }
}
